<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>单聊</title>
    <style>
        #chats {
            width: 400px;
            height: 300px;
            border: 1px solid #ccc;
            float: left;
        }

        #online {
            width: 150px;
            height: 300px;
            border: 1px solid #ccc;
            background-color: #ccc;
            float: left;
            margin-left: 20px;
        }
    </style>
    <script src="/webjars/jquery/3.6.4/jquery.min.js"></script>
    <script src="/webjars/sockjs-client/1.5.1/sockjs.min.js"></script>
    <script src="/webjars/stomp-websocket/2.3.4/stomp.min.js"></script>
    <script type="text/javascript">
        var stompClient = null;

        function connectWebSocket() {
            var url = "http://localhost:8080/webSocket";
            var socket = new SockJS(url);
            stompClient = Stomp.over(socket);
            stompClient.connect({}, function (frame) {
                stompClient.subscribe('/user/queue/receiveOne', function (msg) {
                    showMsg(JSON.parse(msg.body));
                });
                stompClient.subscribe('/topic/receiveAll', function (data) {
                    updateUsers(data);
                });
                stompClient.send("/app/sendAll", {}, "我来啦");
            })
        }

        function showMsg(message) {
            $("#chars").append("<div>" + message.from + ";" + message.content + "</div>");
        }

        function updateUsers(data) {
            var users = JSON.parse(data.body);
            var html = "";
            for (let i = 0; i < users.length; i++) {
                html += "<div onclick='setTo(this)'>" + users[i] + "</div>";
            }
            $("#users").html(html);
        }

        function sendMsg() {
            stompClient.send("/app/sendTo", {}, JSON.stringify({'content': $("#content").val(), 'to': $("#to").val()}))
        }

        function setTo(obj) {
            $("#to").val(obj.innerText)
        }

        function checkData() {
            if ($("#content").val() == "") {
                alert("聊天内容不能为空");
                return;
            }
            if ($("#to").val() == "") {
                alert("发送目标不能为空");
                return;
            }
            var toUser = $("#users").text();
            var toUser = $("#to").val();
            if (listUser.indexOf(toUser) == -1) {
                alert("发送目标必须是列表中的用户");

            }
        }

        function setCurrentUser() {
            $.ajax({
                url: "getCurrentUser",
                success: function (data) {
                    $("#currentUser").text(data);
                },
            })
        }

        function closeWebSocket() {
            if (stompClient !== null) {
                stompClient.disconnect();
            }
            window.location.href = "/logout";
        }

        $(function () {
            connectWebSocket();
            $("#send").click(function () {
                checkData();
                sendMsg();
                $("#content").val();
                setCurrentUser();
            });
        });
    </script>
</head>
<body>
<div>
    用户【<span id="currentUser"></span>】说：
    <input id="content" placeholder="请输入聊天内容" type="text">
    发送给
    <input id="to" placeholder="目标用户" type="text">
    <button id="send" type="button">发送</button>
    &nbsp;<input id="disconnect" onclick="closeWebSocket()" type="button" value="退出聊天"/>
</div>
<br>
<div id="chats">
</div>
<div id="online">
    当前在线用户
    <div id="users">
    </div>
</div>
</body>
</html>